<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>css 网格布局</title>
  <style>
    .grid {
      display: inline-grid;
      display: grid;
      grid-template-columns: auto;
      /* grid-template-rows: 50px ; */
    }

    .grid-item {
      box-shadow: 0px 0px 1px 0px #ddd;
      padding: 5px;
      position: relative;

    }

    .grid-item.th {
      background-color: #fafafa;
    }

    .thead,
    .tbody {
      /* overflow: auto; */
      display: grid;
      grid-template-columns: minmax(100px, 20%) 100px 15%;
    }

    .tbody {
      max-height: 100px;
      /* overflow: auto; */
    }

    .item-1 {
      /* height: 50px; */

    }

    .grid-item:nth-child(2n+1) {
      /* height: 50px; */
    }

    /*  */
    .param-explain {
      display: grid;
      grid-template-columns: 100px 80px 60px auto auto minmax(50px, auto) 60px;
    }

    .grid-th {
      background-color: #fafafa;
      padding: 5px;
      box-shadow: 0px 0px 1px 0px #ddd;
    }

    .grid-td {

      padding: 5px;
      box-shadow: 0px 0px 1px 0px #ddd;
    }

    .grid-td:nth-child(6n) {
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <div class=param-explain>
    <div class=grid-th>名称</div>
    <div class=grid-th>类型</div>
    <div class=grid-th>必填</div>
    <div class=grid-th>默认值</div>
    <div class=grid-th>备注</div>
    <div class=grid-th>校验</div>
    <div class=grid-th>添加</div>

    <input class=grid-td />
    <select class=grid-td>
      <option value="int">int</option>
      <option value="double">double</option>
      <option value="object">object</option>
      <option value="number">number</option>
    </select>
    <div class=grid-td>
      <input class=grid-td type="checkbox">
    </div>

    <input class=grid-td>


    <input class=grid-td>


    <input class=grid-td>


    <div class=grid-td>
      删除
    </div>
  </div>
  <!-- <div id="app" class=grid>
    <div class=' thead '>
      <div class='grid-item th '>1 </div>
      <div class='grid-item th'> 2</div>
      <div class='grid-item th'> 3</div>

    </div>
    <div class=' thead '>
      <div class='grid-item th '>1 </div>
      <div class='grid-item th'> 2</div>
      <div class='grid-item th'> 3</div>

    </div>
    <div class=' tbody '>
      <div class='grid-item '>1 </div>
      <div class='grid-item item-1'> 2</div>
      <div class=grid-item> 3</div>
      <div class=grid-item>1 </div>
      <div class=grid-item> 2</div>
      <div class=grid-item> 3</div>
      <div class=grid-item> 3</div>
      <div class=grid-item>1 </div>
      <div class=grid-item> 2</div>
      <div class=grid-item> 3</div>
    </div>



  </div> -->


</body>

</html>
<script></script>